<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">编号</label>
        <input type="hidden" name="parentId" id="parentId">
        <div class="layui-input-block">
            <input type="text" name="rid1" id="rid1" disabled placeholder="请输入编号" value="" class="layui-input layui-input-inline">
            <input type="text" name="rid2" id="rid2" lay-verify="required" lay-reqtext="编号不能为空" placeholder="请输入编号" value="" class="layui-input layui-input-inline">
            <tip>编号应该为《父id+子id》，添加后编号将不可更改</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">是否是菜单</label>
        <div class="layui-input-block">
            <input type="checkbox" name="isMenu" lay-skin="switch" lay-filter="switchTest" lay-text="是|否" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">父菜单名称</label>
        <div class="layui-input-block">
            <input type="text" name="parentIds" readonly lay-verify="required" lay-reqtext="父菜单名称不能为空" placeholder="请输入父菜单名称" autocomplete="off" class="layui-input layui-input-inline" id="demo2">
            <button onclick="play()" type="button" class="layui-btn layui-btn-primary"><i class="layui-icon"></i></button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单等级</label>
        <div class="layui-input-block">
            <input type="text" id="menuLevel" name="menuLevel" placeholder="请输入菜单等级"  value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" placeholder="请输入名称" lay-reqtext="名称不能为空" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">URL路径</label>
        <div class="layui-input-block">
            <input type="text" name="url" placeholder="请输入URL路径" value="" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/layui/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/layui/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table', 'form', 'tableSelect'], function () {
        var form = layui.form,
            layer = layui.layer,
            tableSelect = layui.tableSelect,
            $ = layui.$;

        play=function (){
            $("#menuLevel").val("")
            $("#parentId").val("")
            $("#rid1").val("")
            $("#demo2").val("")
        }

        tableSelect.render({
            elem: '#demo2',
            searchKey: 'condition',
            checkedKey: 'rid',
            table: {
                url: '${pageContext.request.contextPath}/auth/queryAuthLimit',
                cols: [[
                    {
                        type: 'radio' }
                    ,{
                        field: 'rid',align:'center', title: '编号', sort: true }
                    , {
                        field: 'isMenu',align:'center', title: '是否是菜单' }
                    , {
                        field: 'parentIdView',align:'center', title: '父菜单名称', sort: true}
                    , {
                        field: 'menuLevel',align:'center', title: '菜单等级', sort: true }
                    , {
                        field: 'name',align:'center', title: '名称' }
                    , {
                        field: 'url',align:'center', title: 'URL路径'}
                ]]
            },
            done: function (elem, data) {
                var NEWJSON = []
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.name)
                    //如果菜单等级为空
                    if(item.menuLevel!=null){
                        $("#menuLevel").val(item.menuLevel+1)
                    }
                    $("#parentId").val(item.parentId)
                    $("#rid1").val(item.rid)
                })
                elem.val(NEWJSON.join(","))
            }
        })

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let isMenu = data.field.isMenu;
            if(isMenu=="on"){
                data.field.isMenu=1;
            }else{
                data.field.isMenu=0;
            }
            data.field.rid=$("#rid1").val()+$("#rid2").val()

            $.ajax({
                url:"${pageContext.request.contextPath}/auth/addAuth",
                type:"post",
                data:"data="+JSON.stringify(data.field),
                dataType:"text",
                success:(rs)=>{
                    if(rs=="OK"){
                        layer.msg("添加成功",{icon:1,time:500},function (){
                            parent.location.reload();
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                        })
                    }else{
                        layer.msg("添加失败",{icon:2,time:500})
                    }
                }
            })
            return false;
        });
    });
</script>
</body>
</html>